<template>
  <div>
    <h3>一键换肤</h3>
    <button @click="changeTheme('orange')" style="background-color: orange">
      换肤为Moccasin
    </button>
    <button @click="changeTheme('skyblue')" style="background-color: skyblue">
      换肤为skyblue
    </button>
    <button @click="changeTheme('#00FF7F')" style="background-color: #00ff7f">
      换肤为#00FF7F
    </button>
    <button @click="changeTheme('pink')" style="background-color: pink">
      换肤为pink
    </button>
    <div class="myDiv">我是一个可以换肤的div</div>
  </div>
</template>

<script>
export default {
  setup() {
    // 切换主题方式1：修改全局CSS变量
    let changeTheme = (color) => {
      document.documentElement.style.setProperty("--theme_bg_color", color);
      document.documentElement.style.setProperty("--theme_button_color", color);
    };
    return { changeTheme };
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style scoped>
/* 使用全局的css变量设置颜色 */

.myDiv {
  margin-left: 15px;
  background: var(--theme_button_color);
  width: 200px;
  height: 200px;
  color: white;
}
button {
  color: white;
  border-radius: 5px;
  border: none;
  margin: 10px;
  padding: 10px 10px;
}
</style>
